<template>
    <div class="ac-subscription">
           <div class="container">
               <!-- 3个背景球-->
                <div class="ball1"></div><div class="ball2"></div><div class="ball3"></div>
                  <!-- 3个背景球-->
                  <div class="bg-border"></div>
                  <div class="bg-border bg-right"></div>
                <div class="left">
                   <label class="top-label">{{Lang['method1']}}</label>
                   <h1 class="title">
                        <img src="@/svg/hot.png" width=19 height=24 />
                       <span>{{Lang['direct invest']}}</span> 
                   </h1>
                   <router-link to="/activity/recordList" class="record-list"><img src="./images/record1x.png" width="14" height="14" />{{Lang['records']}}</router-link>
                   <div class="sub-step">
                        <div class="btn-wrap" :class="{'bg-blue':!success}">
                            <button  :class="success?'bg-dark':'bg-blue2'">{{Lang['confirm num']}} </button>
                        </div>
                        <div class="arrows">
                            <img src="@/svg/arrow-right.svg" width=16 height=16 />
                            <img src="@/svg/arrow-right.svg" width=16 height=16 />
                            <img src="@/svg/arrow-right.svg" width=16 height=16 />
                            <img src="@/svg/arrow-right.svg" width=16 height=16 />
                        </div>
                        <div class="btn-wrap"  :class="{'bg-blue':success}">
                            <button :class="success?'bg-blue2':'bg-dark'">{{Lang['success']}} <br/> {{Lang['wait packging']}}</button>
                        </div>
                   </div>
                   <hr />
                   <div class="content"  v-show="!success">
                       <div class="row accout">
                         <span class="txt-left">{{Lang['balance']}}：2.521 {{Lang['coin type']}}</span><span class="txt-right">{{Lang['remain']}}：3000 {{Lang['coin type']}}</span>
                       </div>
                       <div class="row start top">
                           <button class="small">{{Lang['buy']}}{{Lang['coin type']}}</button>
                       </div>
                       <div class="row top" style="margin-top:30px">
                           <span class="buy-title">/&nbsp;&nbsp;&nbsp;{{Lang['buyit']}}&nbsp;&nbsp;&nbsp;/</span>
                       </div>
                       <div class="row" style="margin-top:-10px">
                           <label class="font-s">{{Lang['no miners']}}</label>
                       </div>
                       <div class="row" style="margin-top:-10px">
                           <label class="font-s">{{Lang['ratio']}}：1 {{Lang['coin type']}}=5000IT</label>
                       </div>
                       <div class="row" style="margin-top:6px">
                           <label>{{Lang['quantity']}}</label>
                           <div class="input">
                               <input type="text" class="font-d" :placeholder="Lang['entry quantity']"/>
                               <label>{{Lang['coin type']}}{{Lang['coin type']}}</label>
                           </div>
                       </div>
                       <!-- <div class="row v-between">
                           <label>矿工费</label>
                           <div class="input">
                               <input type="text" placeholder="输入购买数量"/>
                               <label>ETH</label>
                           </div>
                       </div> -->
                       <div class="row">
                           <span class="tip">{{Lang['minimum']}}0.1{{Lang['coin type']}}</span>
                       </div>
                       <!-- <div class="row" style="margin-top:6px">
                           <label>实际购买数量</label>
                           <div class="input dark font-d">
                               <input type="text"  class="dark font-d" />
                               <label class="font-d">ETH</label>
                           </div>
                       </div> -->
                       <div class="row v-between">
                           <label>{{Lang['get num']}}</label>
                           <div class="input dark">
                               <input type="text"  class="dark font-d" placeholder="0"/>
                               <label class="font-d">IT</label>
                           </div>
                       </div>
                       <div class="row" style="margin-top:15px">
                           <button class="submit" :class="{'bg-dark':!isInput}" @click="submit">{{Lang['confirm']}}</button>
                       </div>
                   </div>
                   <div class="content"  v-show="success">
                       
                       <div class="row" style="margin-top:30px">
                           <span class="buy-title">/&nbsp;&nbsp;&nbsp;{{Lang['direct success']}}&nbsp;&nbsp;&nbsp;/</span>
                       </div>
                       <div class="row" style="margin-top:10px">
                           <label>{{Lang['thank u']}}</label>
                       </div>
                       <div class="row"  style="height:200px;margin-top:-10px">
                           <ul class="info">
                              <li><span>{{Lang['time']}}</span><span>2018-07-15 03:00</span></li>
                              <li><span>{{Lang['round']}}</span><span>1</span></li>
                              <li><span>{{Lang['buy quantity']}}(ETH)：</span><span>1.58</span></li>
                              <li><span>{{Lang['IT quantity']}}：</span><span>6320</span></li>
                           </ul>
                       </div>
                       <div class="row" style="margin-top:10px">
                           <button class="submit" @click="buyAgain">{{Lang['go on']}}</button>
                       </div>
                   </div>
                   <div class="note" v-show="!success">{{Lang['note']}}</div>
                   <div class="note multi-line" v-show="success">{{Lang['on the way']}}
                       <br />{{Lang['msg notify']}}
                   </div>
                </div>
                <div class="right">
                   <label class="top-label">{{Lang['method2']}}</label>
                   <h1 class="title">
                       <span>{{Lang['use wallet']}}</span> 
                   </h1>
                   <div class="contract-addr">
                       <span>
                           {{Lang['con addr']}}：2393929asdfswfdaf93292939sdfsdf93299923lk
                       </span>
                       <div class="btn-wrap">
                           <button class="copytext">{{Lang['copy']}}</button>
                           <button class="bc-browser" style="margin-left:65px">{{Lang['blockchain browser']}}</button>
                       </div>
                   </div>
                   <hr/>
                   <div class="content">
                       <span>{{Lang['recommend']}}</span>
                       <div class="qrcode" id="loginQrCode"></div>
                       <ul class="notice">
                           <li>{{Lang['clause title']}}:</li>
                           <li>{{Lang['clause1']}}</li>
                           <li>{{Lang['clause2']}}</li>
                           <li>{{Lang['clause3']}}</li>
                           <li>{{Lang['clause4']}}</li>
                       </ul>
                       <router-link class="guide" to="/activity/guideBanner">{{Lang['guide']}}{{Lang['example']}}</router-link>
                   </div>
                </div>
           </div>
    </div>
  

</template>
<script>
import './../../../static/js/jquery.qrcode.min.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
export default {
    props: {
		lang: {
			type: Object,
		},
	},
    data(){
        return{
            success:false,
            isInput:false,
            Lang:{}
        }
    },
    created(){
       
    },
    mounted(){
      if ($('#loginQrCode').find('canvas').length > 0) {
        $('#loginQrCode').find('canvas').eq(0).remove('canvas')
      }
      $('#loginQrCode').qrcode({
        render: 'canvas',
        text:'2393929asdfswfdaf93292939sdfsdf93299923lk',
        width: 160,
        height: 160
      });
      this.Lang=this.lang['subscription'] || {};
    },
    methods:{
       submit(){
           this.success=true;
       },
       buyAgain(){
           this.success=false;
       }
    }
}
</script>

<style lang="less" scoped>
@keyframes act_fade {
    from { background-color:rgba(15,94,255,0.55) }
    50% {background-color:rgba(15,94,255,0.25) }
    to { background-color:rgba(24,96,237,0.55)}
}
 
@-webkit-keyframes act_fade {
    from { background-color:rgba(15,94,255,0.55)}
    50% {background-color:rgba(15,94,255,0.25) }
    to { background-color:rgba(24,96,237,0.55)}
}
//高光移动
//======================
    .txt-left{text-align:left}
    .txt-right{text-align:right}
    .txt-center{text-align:center}
    .ac-subscription{
        width:100%;
        text-align:center;
        padding-top:130px;
        padding-bottom:2px;
        background-image: linear-gradient(-180deg, #304599 2%, #0E1740 100%);
        .container{
            position: relative;
            width:1200px;
            height:750px;
            margin:0 auto 80px auto;
            color:#fff;
            font-family: 'NotoSansCJKsc-Regula';
            .ball1{
                width:525px;
                height:525px;
                position: absolute;
                top:-40px;
                right:-235px;
                background:url('./images/bg/1.png') no-repeat 50% 50%;
            }
            .ball2{
                width:154px;
                height:157px;
                position: absolute;
                top:300px;
                left:-110px;
                background:url('./images/bg/2.png') no-repeat 50% 50%;
            }
            .ball3{
                width:335px;
                height:78px;
                position: absolute;
                bottom:-82px;
                right:-150px;
                background:url('./images/bg/3.png') no-repeat;
            }
            hr{
                position: absolute;
                height:0;
                border:none;
                border-bottom:1px solid #4c5490;
                width:100%;
                top:188px;
                left:0;
                clear:both;
            }
            .bg-border{
                position: absolute;
                width:600px;
                height:750px;
                top:-1px;
                right:-1px;
                bottom:-1px;
                left:-1px;
                background-image:-webkit-linear-gradient(to right,#459CFF 0%,#4BE8FF 40%);
                background-image:-moz-linear-gradient(to right,#459CFF 0%,#4BE8FF 40%);
                background-image:linear-gradient(to right,#459CFF 0%,#4BE8FF 40%);
                content:'';
                border-radius: 20px;
            }
            .bg-right{
                width:580px;
                left:620px;
            }
            .box{
                position: relative;
                border-radius: 20px;
                background-image: linear-gradient(130deg, #4BCBF5 0%, #7D25E6 100%);
                height:748px;
                float:left;
            }      
            .left{
                .box;
               width:598px;
            }
            .right{
                .box;
               width:578px;
               margin-left:23px;
            }
            .top-label{
                display:flex;
                position: absolute;
                left:30px;
                top:20px;
                width:98px;
                height:30px;
                background-image: linear-gradient(-130deg, rgba(62,57,255,0.98) 0%, #3466FF 100%);
                border-radius: 16px;
                font-size:16px;
                justify-content: center;
                align-items: center;
            }
            .title{
                font-size:30px;
                margin:31px auto 20px auto;
                height:45px;
            }
            .record-list{
                position: absolute;
                display:flex;
                justify-content: space-between;
                width:74px;
                height:20px;
                top:30px;
                right:40px;
                color:#fff;
                font-size:14px;
                &:hover{
                    color:#74ffff;
                    text-decoration:underline;
                }
            }
            .sub-step{
                width:100%;
                height:90px;
                display:flex;
                flex-flow:row nowrap;
                justify-content: center;
                .btn-wrap{
                    width:198px;
                    height:70px;
                    border-radius: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    button{
                        color:#fff;
                        width:172px;
                        height:48px;
                        border-radius: 10px;
                        line-height:20px;
                    }
                    .bg-blue2{
                        background-color:#0f5eff;
                    }
                    .bg-dark{
                        background-color: #375396;
                    }
                }
                
                .arrows{
                    position: relative;
                    width:110px;
                    height:70px;
                    margin-left:8px;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        position: relative;
                        margin-right:10px;
                        &:last-child{margin:0}
                    }
                }
                .bg-blue{
                    animation:act_fade 1000ms infinite;
                    -webkit-animation:act_fade 1000ms infinite;
                    background-color:rgba(15,94,255,0.5);
                }
                
            }
            .contract-addr{
                span{
                    font-size:16px;
                }
                .btn-wrap{
                    width:100%;
                    height:68px;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                }
                button{
                    width:156px;
                    height:40px;
                    font-size:14px;
                    background:#0f5eff;
                    border-radius: 4px;
                    color:#fff;
                    &:hover{
                        box-shadow: 1px 2px 4px 0 rgba(35,84,183,0.73);
                    }
                }
            }
            .content{
                display: flex;
                flex-flow: column nowrap;
                margin:20px 40px auto 40px;
                .qrcode{
                    display:flex;
                    width:100%;
                    height:160px;
                    justify-content: center;
                    margin-top:20px;
                }
                ul>li{
                    text-align:left;
                    line-height:20px;
                    font-size:14px;
                    &:first-child{
                        font-size:18px;
                        line-height:57px;
                    }
                    &:last-child{
                        font-size:16px;
                        color:#f7d000;
                        line-height:26px;
                    }
                }
                .guide{
                    text-decoration: underline;
                    color:#9ac2ff;
                    position: absolute;
                    bottom:49px;
                    left:217px;
                    font-size:14px;
                    &:hover{
                        color:#74ffff;
                    }
                }
                .row{
                    width:100%;
                    height:40px;
                    display:flex;
                    flex-flow: row nowrap;
                    justify-content: center;
                    align-items: center;
                    ul{
                        width:336px;
                        height:110px;
                        border:1px solid #fff;
                        border-radius: 10px;
                        padding:20px 30px;
                        
                        li{
                            font-size:14px;
                            color:#fff;
                            line-height:20px;
                            margin-top:10px;
                            display:flex;
                            justify-content: space-between;
                            width:100%;
                            &:first-child{
                                margin:0;
                            }
                            span{
                                width:50%;
                                text-align:left;
                                &:last-child{
                                    text-align:right;
                                }
                            }
                        }
                    }
                    button{
                        background:#0f5eff;
                        border-radius: 4px;
                        width:156px;
                        height:40px;
                        color:#fff;
                        &:hover{box-shadow: 1px 2px 4px 0 rgba(35,84,183,0.73)}
                        
                    }
                    .bg-dark{
                        background-color:#375396;color:rgba(255,255,255,0.5)
                    }
                    .small{
                        color:#e9ecf3;
                        width:79px;
                        height:26px;
                    }
                    .buy-title{
                        color:#87fcfc;
                        font-size:20px;
                    }
                    label{
                        font-size:16px;
                        display:inline-block;
                        min-width:95px;
                        text-align:right;
                    }
                    .font-s{font-size:14px}
                    .input{
                        margin-left:10px;
                        width:319px;
                        height:36px;
                        border-radius:4px;
                        background:#fff;
                        display:flex;
                        justify-content:space-between;
                        align-items: center;
                        input{
                            width:30%;
                            margin:10px;
                        }
                        input::-webkit-input-placeholder{
                            color:#999;
                        }
                        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                            color:#999;
                        }
                        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                            color:#999;
                        }
                        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                            color:#999;
                        }  
                        label{
                            margin:10px;
                            color:#333;
                            font-size:14px;
                        }
                        .font-d{color:#999}
                    }
                   
                    .dark{
                        background:#375396;
                    }
                    .tip{
                        width:91%;
                        text-align:right;
                        margin-right:9%;
                        margin-top:-8px;
                    }
                }
                .start{
                    justify-content: flex-start;
                }
                .top{
                    align-items: flex-start;
                }
                .accout{
                    width:100%;
                    justify-content: space-between;
                    margin-top:-10px;
                    span{width:50%;}
                }
                .v-between{
                    margin:6px auto 20px auto;
                }
            }
            .note{
                width:480px;
                position: absolute;
                padding:0 60px;
                bottom:49px;
                color:#ecc811;
                font-size:14px;
             }
             .multi-line{
                 width:500px;
                 padding:0 50px;
                 bottom:83px;
                 line-height:20px;
                 color:#fff;
             }
        }
    }
</style>
